@media screen and (min-width: 320px) {
    .contenter {
        border: 1px solid #e5e4e9;
        background-color: rgba($color: #ff00dd, $alpha: 0.4);
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(3, 33.33%);
        width: 240px;
        height: 240px;
    }
}

@media screen and (min-width: 640px) {
    .contenter {
        border: 1px solid #e5e4e9;
        background-color: rgba($color: #ff00dd, $alpha: 0.4);
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(3, 33.33%);
        width: 320px;
        height: 320px;
    }
}

@media screen and (min-width: 900px) {
    .contenter {
        border: 1px solid #e5e4e9;
        background-color: rgba($color: #ff00dd, $alpha: 0.4);
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
        grid-template-rows: repeat(3, 33.33%);
        width: 480px;
        height: 480px;
    }
}

.tic-tac-toe {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.chess-grid {
    border: 1px solid #e5e4e9;
    font-size: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
}